<template>
  <BasicFormForBOE class="common-search" @register="register">
  </BasicFormForBOE>
</template>
<script lang="ts" setup>
import { BasicFormForBOE, useForm,FormSchema } from '@/components/Form';
// import {  } from '@/components/Form'
import isoWeek from 'dayjs/plugin/isoWeek'
import { dateOptions, getSearchFormSchema, setDisabledDate, pickerType } from './data'
import dayjs from 'dayjs';
import { onMounted } from 'vue';
const props = defineProps({
  extraSearch: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  },
  // 是否需要周搜索，默认不需要
  disabledOption: {
    type: Array as PropType<string[]>,
    default: () => ['']
    // default: () => ['week']
  },
  // 可以选择的最大日期，用来设置disabledDate
  chooseMaxDate: {
    type: Object,
    default: () => { }
  }
})

defineOptions({ name: 'CommonDateSearch' })
dayjs.extend(isoWeek)
const emit = defineEmits(['search'])
const handleSearch = async () => {
  const { queryType, onlyStartDay, startDay, endDay, ...others } = await getFieldsValue()
  if (!queryType) {
    setTimeout(() => handleSearch(), 0)
    return
  }
  const { isRange, format } = dateOptions.filter(item => item.value === queryType)[0]
  const start = isRange ? startDay : onlyStartDay
  const params = {
    queryType: pickerType(queryType),
    startDay: dayjs(start).format(format),
    endDay: isRange ? dayjs(endDay).format(format) : undefined,
    ...others
  }
  // 如果选择的是周，需要给后端2024-38的格式，重新format下
  if (queryType === 'week') {
    params.startDay = onlyStartDay.slice(0, -2)
    // params.startDay = `${dayjs().year()}-${dayjs().isoWeek()}`
  }
  emit('search', params)

}
const handleReset = async () => {
  const { isRange, format, picker, value } = dateOptions[0]
  await setFieldsValue({
    onlyStartDay: dayjs().format(format)
  })
  await updateSchema([{
    field: 'onlyStartDay',
    ifShow: !isRange,
    componentProps: {
      picker,
      disabledDate: (current) => setDisabledDate(current, props.chooseMaxDate[value]),
      valueFormat: format
    }
  },
  {
    field: '[startDay,endDay]',
    ifShow: isRange,
  }])
}

const [register, { getFieldsValue, updateSchema, setFieldsValue }] = useForm({
  labelWidth: 80,
  schemas: getSearchFormSchema({ disabledOption: props.disabledOption, chooseMaxDate: props.chooseMaxDate }).concat(props.extraSearch),
  autoSubmitOnEnter: true,
  submitFunc: handleSearch,
  submitOnReset: true,
  resetFunc: handleReset
})

defineExpose({
  handleSearch,
  setFieldsValue
})
onMounted(async () => {
  await setFieldsValue({
    queryType: 'seven',
    '[startDay,endDay]': [
      dayjs().subtract(7, 'days').format('YYYY-MM-DD'),
      dayjs().subtract(1, 'days').format('YYYY-MM-DD')
    ]
  })
  // handleSearch() // 立即触发首次搜索
})
</script>

<style scoped lang="scss">
.common-search {
  margin-bottom: -12px;
  padding: 0px 8px;
  border-radius: 2px;
  background-color: var(--component-background-color);

  :deep(.ant-form-item) {
    margin-bottom: 12px;
  }

  :deep(.ant-row>.ant-col:last-child) {
    flex: 1;
    max-width: none;
  }
}
</style>
